<template>
	<!-- 商品结算 -->
	<view class="settle_box">
		<!-- 选中按钮 -->
		<view class="check_box">
			<label class="check_btn">
				<checkbox value="" :checked="checked"  @click="total_check"/>
				<text>全选</text>
			</label>
		</view>
		<!-- 商品总价 -->
		<view class="total_price">
			合计:<text>￥{{price}}</text>
		</view>
		<!-- 结算 -->
		<view class="settle_btn" @click="settle_total">
			结算({{total}})
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters, mapMutations} from 'vuex'
	
	export default {
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['checkCount']),
		},
		name:"my_settle",
		data() {
			return {
				total: 0,
				price: 0,
				checked:false
			};
		},
		created() {
			
		},
		methods: {
			...mapMutations('m_cart', ['goodsTotalChecked']),
			settle_total(){
				
			},
			total_check(){
				this.checked = !this.checked
				this.goodsTotalChecked(this.checked)
			}
		},
		watch: {
			checkCount: {
				handler(newVal){
					this.price = 0
					this.total = newVal.length
					newVal.forEach(i => {
						this.price += i.goods_price
					})
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.settle_box{
		position: fixed;
		bottom: 50px;
		z-index: 99;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background-color: #ffffff;
		font-size: 25rpx;
		.check_box{
			padding-left: 20rpx;
			.check_btn{
				text{
					vertical-align: middle;
				}
			}
		}
		.total_price{
			text{
				color: #ff0000;
				font-weight: bold;
			}
		}
		.settle_btn{
			text-align: center;
			width: 30%;
			line-height: 100rpx;
			background-color: #ff0000;
			color: #ffffff;
		}
	}
</style>